<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    如何实现动态操作input表单中的属性 value
    1.  v-bind  单向数据流    data中绑定的数据可以影响 页面的渲染  页面渲染数据的改变不会影响data中绑定的属性值
    2.  v-model 双向数据绑定  data中的值和表单中填写的值 互相影响   data的属性值和表单中的数据同步
        绑定方式:  v-model:value   简化  v-model
-->
<div id="app">
    <form action="#" method="get">
        <p>
            <input type="text" placeholder="请输入用户名" name="username" v-model:value="usr.username">
        </p>
        <p>
            <input type="text" placeholder="请输入密码" name="password" v-model="usr.password">
        </p>

        <p>
            <button @click.prevent="login">编辑</button>
        </p>

    </form>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            usr: {
                username: 'super',
                password: '666666'
            },
            username: 'admin',
            password: '123456'
        },
        methods: {
            login() {
                //获取用户在表单中填写数据  username  password
                console.log(this.username)
                console.log(this.password)
                // 将表单数据封装在一个js对象中  提交到后台  json
                const user = {
                    username: this.username,
                    password: this.password
                }

                console.log(user)
                console.log(typeof user)

                // javascript  object  => json 字符串
                let json_obj = JSON.stringify(user)
                console.log(json_obj)
                console.log(typeof json_obj)

                // json字符串  ->  js obj  响应
                let usr = JSON.parse(json_obj)
                console.log(usr.username)
                console.log(usr.password)

                // es6  解构对象  解构对象时  声明的变量名 要保持和对象中的属性别一致
                let {username, password} = usr
                console.log(username)
                console.log(password)

                let uname = 'admin'
                let pwd ='111111'

                //   {uname,pwd}  ==>  {uname:uname,pwd:pwd}   以字面量形式创建对象时 属性名和属性值变量声明名字一致 则可以简写
                usr = {uname,pwd}
                console.log(usr)

                console.log(typeof usr)

                // console.log(this.usr)

            }
        }
    })
</script>
</body>
</html>